<template>
    <div>
        <Collapse v-model="giswarnning">
            <Panel name="1" style="font-size:17px;">
                GIS变电站预警
                <p slot="content">
                    <Table border :columns="columns" :data="data"></Table>
                </p>
            </Panel>
        </Collapse>

        <Collapse v-model="transformer_substation" style="margin-top:20px;">
            <Panel name="2" style="font-size:17px;">
                变电站
                <p slot="content">
                    <ul class = 'itemlist'>
                        <li class="item" @click="handleCheck(item)" v-for="(item,key) in transformer_substationlist" :key = "key">
                            <div class="itemdiv" :style="{'background':item.statuscode=='0'?'rgba(92, 184, 92, 1)':'rgba(245, 70, 51, 1)'}">
                                {{item.title}}<br><Icon :type = '(item.statuscode == "0")?"android-happy":"ios-bolt-outline"'></Icon> {{item.status}}
                            </div>
                        </li>
                    </ul>
                </p>
            </Panel>
        </Collapse>
    </div>    
</template>
<script>
import util from '../util/util'
import axios from 'axios'
export default {
    data () {
            return {
                currenpage:1,
                total:1,
                giswarnning:'1',
                transformer_substation:'2',
                transformer_substationlist:[],
                columns: [
                    {
                        title: '月份',
                        key: 'month',
                        render: (h, params) => {
                            return h('div', [
                                h('strong',{
                                    style: {
                                        fontSize:"16px"
                                    },
                                }, params.row.month)
                            ]);
                        }
                    },
                    {
                        title: '预警',
                        key: 'warnning',
                        render:(h,params) => {
                            return h('div',[
                                h('span',{
                                    style:{
                                        color:'rgb(255, 146, 7)',
                                        cursor:'pointer',
                                        fontWeight:'700',
                                        fontSize:'16px'
                                    },
                                    on:{
                                        click:()=>{
                                            this.$router.push({name:'warnning_index'})
                                        }
                                    }
                                },params.row.warnning)
                            ])
                        }
                    },
                    {
                        title: '待处理',
                        key: 'resolve',
                        render:(h,params) => {
                            return h('div',[
                                h('span',{
                                    style:{
                                        color:'rgb(255, 146, 7)',
                                        cursor:'pointer',
                                        fontWeight:'700',
                                        fontSize:'16px'
                                    },
                                    on:{
                                        click:()=>{
                                            this.$router.push({name:'warnning_index',params:{resolvestatus:0}});
                                        }
                                    }
                                },params.row.resolve)
                            ])
                        }
                    },
                    {
                        title: '处理中',
                        render:(h,params) => {
                            return h('div',[
                                h('span',{
                                    style:{
                                        color:'#0e90d2'
                                    }
                                },params.row.resolving)
                            ])
                        }
                    },
                    {
                        title: '已处理',
                        render:(h,params) => {
                            return h('div',[
                                h('span',{
                                    style:{
                                        color:'green'
                                    }
                                },params.row.resolved)
                            ])
                        }
                    }
                ],
                data: [
                    
                ]
            }
        },
        created(){
            this.getdata()
        },
        methods: {
            handleCheck:function(item){
                this.$store.commit('ClickDevstatus',item);
                this.$router.push({name:'devstatus_detail'});
            },
            getdata:function(){
                let vm = this;
                util.ajax({
                    method: 'get',
                    url: '/util-api-warning_monthly_count/',
                    data: {
                        
                    }
                })
                .then(function (response) {
                    if(response.status==200){
                        let resdata = response.data;
                        vm.data = [
                            {
                                month: '本月',
                                warnning: resdata.this_month.all,
                                resolve: resdata.this_month[0],
                                resolving:resdata.this_month[1],
                                resolved:resdata.this_month[2]
                            },
                            {
                                month: '上月',
                                warnning: resdata.last_month.all,
                                resolve: resdata.last_month[0],
                                resolving:resdata.last_month[1],
                                resolved:resdata.last_month[2]
                            },
                        ];
                        vm.transformer_substationlist = [];
                        for(let i =0;i<response.data.ts.length;i++){
                            let item = {
                                name:response.data.ts[i].name,
                                id:response.data.ts[i].index,
                                title:response.data.ts[i].name,
                                status:response.data.ts[i].flag==1?'预警':'良好',
                                statuscode:response.data.ts[i].flag==1?'1':'0'
                            }
                            vm.transformer_substationlist.push(item);
                        }

                    }
                })
                .catch(function(err){
                    console.log(err)
                })
            }
        }
}
</script>
<style scoped>
    .ivu-table{
        font-size: 16px;
    }
    .itemlist{
        list-style: none;
        display: flex;
    }
    .item{
        display: inline-block;
        padding: 5px;
        cursor: pointer;
    }
    .itemdiv{
        width: 176px;
        height: 99px;
        margin: auto;
        padding: 21px;
        display: inline-block;
        font-size: 17px;
        text-align: center;
        color: #ffffff;
        border-radius: 4px;
    }
</style>
